<template>
  <div class="detail">
     <detail-nav-bar></detail-nav-bar>
     <detail-swiper  :childtop-images="topImages"></detail-swiper>
     <detail-base-info :goods="goods"></detail-base-info>
     <detail-shop-info :shop="shop"></detail-shop-info>
     <detail-goods-info :detail-info="detailInfo"></detail-goods-info>
     <detail-param-info :param-info="paramInfo"></detail-param-info>
     <detail-comment-info :comment-info="commentInfo"></detail-comment-info>
  </div>
</template>

<script>
import DetailNavBar from './childComps/DetailNavBar.vue'

import { getDetail,Goods,Shop,GoodsParam } from '@/network/detail';
import DetailSwiper from './childComps/DetailSwiper.vue';
import DetailBaseInfo from './childComps/DetailBaseInfo.vue';
import DetailShopInfo from './childComps/DetailShopInfo.vue';
import DetailGoodsInfo from './childComps/DetailGoodsInfo.vue';
import DetailParamInfo from './childComps/DetailParamInfo.vue';
import DetailCommentInfo from './childComps/DetailCommentInfo.vue';

export default {
   name:'Detail',
   components:{
      DetailNavBar,
      DetailSwiper,
      DetailBaseInfo,
      DetailShopInfo,
      DetailGoodsInfo,
      DetailParamInfo,
      DetailCommentInfo,
     

   },
   data(){
    return{
      iid:null,
      topImages:[],
      goods:{},
      shop:{},
      detailInfo:{},
      paramInfo:{},
      commentInfo:{},


    }
   },
   methods:{

   },

   created(){
    // 保存传入的iid
      this.iid=this.$route.params.iid

      // 根据iid请求详情数据
      getDetail(this.iid).then(res=>{
        console.log(res);
        const data=res.result
        this.topImages=res.result.itemInfo.topImages
        this.goods=new Goods(data.itemInfo,data.columns,data.shopInfo.services)
        this.shop=new Shop(data.shopInfo)
        // 保存商品详情的数据
        this.detailInfo=data.detailInfo
        // 参数数据
        this.paramInfo=new GoodsParam(data.itemParams.info,data.itemParams.rule)
        // 评论信息
        if(0!=data.rate.cRate){
          this.commentInfo=data.rate.list[0]
        }
      })
      
     
      
   }
}
</script>

<style scoped>
   
</style>